<template>
	<view class="box">
		<view class="top">
			<view class="charts-box">
				<qiun-data-charts type="pie" :opts="opts" :chartData="chartData" />
			</view>
		</view>
		<view class="center">
			<view class="one">
				<view class="l1">
					<view style="height: 100%;">
						<view style="padding: 10px;">今日能耗:</view>
						<view style="padding-left: 10px;">37.988Kwh</view>
					</view>
					<view class="charts-box1">
						<qiun-data-charts type="arcbar" :opts="opts1" :chartData="chartData1" />
					</view>
				</view>
				<view class="r1">
					<view style="height: 100%;">
						<view style="padding: 10px;">昨日能耗:</view>
						<view style="padding-left: 10px;">34.988Kwh</view>
					</view>
					<view class="charts-box1">
						<qiun-data-charts type="arcbar" :opts="opts1" :chartData="chartData1" />
					</view>
				</view>
			</view>
			<view class="one">
				<view class="l1">
					<view style="height: 100%;">
						<view style="padding: 10px;">今日费用:</view>
						<view style="padding-left: 10px;">¥14.7</view>
					</view>
					<view class="charts-box1">
						<qiun-data-charts type="arcbar" :opts="opts1" :chartData="chartData1" />
					</view>
				</view>
				<view class="r1">
					<view style="height: 100%;">
						<view style="padding: 10px;">今日费用:</view>
						<view style="padding-left: 10px;">¥14.7</view>
					</view>
					<view class="charts-box1">
						<qiun-data-charts type="arcbar" :opts="opts1" :chartData="chartData1" />
					</view>
				</view>
			</view>
		
		</view>
		<view class="btn">
			<view class='txt'>
				<image src='../../../static/dian.png' @click="toelectric"></image>
				<view>电能耗</view>
			</view>
			<view class='txt'>
				<image src='../../../static/shui.png'></image>
				<view>水能耗</view>
			</view>
			<view class='txt'>
				<image src='../../../static/qi.png'></image>
				<view>气能耗</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				chartData: {},
				chartData1: {},
				opts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [20, 5, 5, 5],
					enableScroll: false,
					legend: {
						show: false
					},
					extra: {
						pie: {
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 20,
							border: true,
							borderWidth: 1,
							borderColor: "#FFFFFF"
						}
					}
				},
				// 园形图
				opts1: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [0,5,5,5],
					title: {
						name: "",
						fontSize: 35,
						color: "#a0d0e8"
					},
					subtitle: {
						name: "",
						fontSize: 0,
						color: "#666666"
					},
					extra: {
						arcbar: {
							type: "circle",
							width: 6,
							backgroundColor: "#E9E9E9",
							startAngle: 1.5,
							endAngle: 0.25,
							gap: 2
						}
					}
				}
			}
		},
		onReady() {
			this.getServerData1();
			this.getServerData();
		},
		methods: {
			toelectric(){
				uni.navigateTo({
					url:'/pages/energy-management/electric-energy-consumption/electric-energy-consumption'
				})
			},
			getServerData1() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						series: [{
							name: "正确率",
							color: "#3399cc",
							data: 0.8
						}]
					};
					this.chartData1 = JSON.parse(JSON.stringify(res));
				}, 500);
			},
			getServerData() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						series: [{
							data: [{
								"name": "空调",
								"value": 50,
								"labelText": "18%"
							}, {
								"name": "冷机",
								"value": 30,
								"labelText": "32%"
							}, {
								"name": "冷却机",
								"value": 20,
								"labelText": "20%"
							}, {
								"name": "电梯",
								"value": 18,
								"labelText": "17%"
							}, {
								"name": "智能照明",
								"value": 8,
								"labelText": "23%"
							}]
						}]
					};
					this.chartData = JSON.parse(JSON.stringify(res));
				}, 500);
			},
		},
		mounted() {
			uni.hideHomeButton()
		}
	}
</script>

<style lang="scss">
	.charts-box1 {
		width: 50%;
		height: 100%;
		margin: 0;
		text-align: right;
	}
.charts-box2 {
		width: 70%;
		height: 70%;
	}
	.charts-box {
		width: 90%;
		height: 230px;
	}

	.box {
		width: 100vw;
		height: 100vh;

		.top {
			width: 100%;
			height: 40%;
			// background-color: lavender;
		}

		.center {
			width: 100%;
			height: 30%;
			// background-color: lightcoral;

			.one {
				width: 100%;
				height: 50%;
				display: flex;

				.l1 {
					width: 50%;
					height: 100%;
					display: flex;
					view:first-child{
						width: 100%;
						display: flex;
						flex-direction: column;
						justify-content: center;
					}
				}

				.r1 {
					width: 50%;
					height: 100%;
					display: flex;
					view{
						display: flex;
						flex-direction: column;
						justify-content: center;
					}
				}
			}

			.two {
				width: 100%;
				height: 50%;
				display: flex;

				.l2 {
					width: 50%;
					height: 100%;
					background-color: red;
					display: flex;
					view{
						display: flex;
						flex-direction: column;
						justify-content: center;
					}
				}

				.r2 {
					width: 50%;
					height: 100%;
					background-color: red;
					display: flex;
				}
			}
		}

		.btn {
			width: 100%;
			height: 30%;
			// background-color: lightcyan;
			display: flex;
			.txt{
				width: 15%;
				height: 30%;
				// background-color: lawngreen;
				margin: 40px 20px;
				image{
					width: 40px;
					height: 40px;
					
					line-height: 30%;
				}
				view{
					color: gray;
				}
			}
			
		}
	}
</style>
